.app-page-box {
  box-sizing: border-box;
  height: 100%;
  padding: 20rem 20rem 10rem;
  box-sizing: border-box;
  border-bottom: 7rem solid #c3162d;
  background-color: #f5f5f5;

  .app-page {
    width: 100%;
    height: 100%;
    border-radius: 10rem;
    background-color: #fff;
  }
}
.ant-menu-light {
  background: transparent !important;
}
.ant-menu-horizontal {
  max-width: calc(100% - 400rem) !important;
}
.ant-menu {
  // max-width: 75% !important;
  .ant-menu-item-icon,
  .ant-menu-title-content {
    font-size: 16rem !important;
  }
  .ant-menu-submenu {
    padding: 0 16rem !important;
  }
  .ant-menu-submenu-title,
  .ant-menu-item {
    height: 60rem !important;
    line-height: 60rem !important;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 16rem !important;
    .anticon {
      min-width: 28rem !important;
    }
    .ant-menu-title-content {
      margin-inline-start: 10rem !important;
    }
  }
  .ant-menu-item-selected,
  .ant-menu-submenu-selected {
    color: #fff !important;
    background-color: transparent !important;

    .ant-menu-submenu-title {
      color: #fff !important;
    }

    .ant-menu-item-icon,
    .ant-menu-title-content {
      position: relative;
      z-index: 2;
    }

    &::after {
      display: none;
    }

    &::before {
      width: 100%;
      height: 41rem;
      background: #eb5f18;
      border-radius: 8rem;
      content: '';
      position: absolute;
      left: 0;
      top: 50%;
      z-index: 0;
      transform: translateY(-50%);
    }
  }

  .ant-menu-submenu::after {
    display: none;
  }

  .ant-menu-submenu-active,
  .ant-menu-item-active {
    background-color: transparent;
    color: #fff;

    &::after {
      display: none;
    }
  }
}

.ant-menu-submenu-popup {
  .ant-menu-vertical.ant-menu-sub {
  }
  .ant-menu {
    background: linear-gradient(0deg, #ff7252, #fc5451) !important;
    opacity: 0.82 !important;

    .ant-menu-item:hover {
      background: transparent !important;
      color: #fff !important;
    }

    .ant-menu-item-selected,
    .ant-menu-submenu-selected {
      &::before {
        display: none;
      }
    }

    .ant-menu-item-selected {
      background-color: transparent;
      color: #fff;
    }
  }
}

.ant-input-number {
  background: transparent !important;
  border-top: 0 !important;
  border-left: 0 !important;
  border-right: 0 !important;
  border-radius: 0 !important;

  &-group-addon {
    background: transparent !important;
    border-top: 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
    border-radius: 0 !important;
    cursor: pointer;
  }
}

.ant-input,
.ant-select-selector,
.ant-picker {
  background: transparent !important;
  border-top: 0 !important;
  border-left: 0 !important;
  border-right: 0 !important;
  border-radius: 0 !important;
}

.ant-input:focus {
  // border-color: transparent !important;
  // border-inline-end-width: 1rem;
  background-color: red;
}

// button
.ant-btn {
  height: 48rem !important;
  margin-left: 16rem;
  font-size: 18rem !important;
  padding: 4rem 15rem !important;
  border-radius: 8rem !important;
  &.add {
    &,
    &:active,
    &.active {
      color: #fff !important;
      width: 224rem;
      height: 80rem;
      background: linear-gradient(-90deg, #ff7a5b 0%, #fc5451 100%);
      border-radius: 15rem;
      margin-left: 0;
      margin-right: 43rem;
    }

    &:hover,
    &:focus {
      width: 224rem;
      height: 80rem;
      background: linear-gradient(-90deg, #ff7a5b 0%, #fc5451 100%);
      border-radius: 15rem;
      margin-left: 0;
      margin-right: 43rem;
    }
  }
  &.small {
    transform: scale(0.6) !important;
  }
  &.submit {
    &,
    &:active,
    &.active {
      color: #fff !important;
      background-color: #ef6410 !important;
      border-color: #ef6410 !important;
    }

    &:hover,
    &:focus {
      background-color: #ef6410 !important;
      border-color: #ef6410 !important;
    }
  }
  &.cancel {
    &,
    &:active,
    &.active {
      color: #000 !important;
      background-color: #c8c8c8 !important;
      border-color: #c8c8c8 !important;
    }

    &:hover,
    &:focus {
      background-color: #c8c8c8 !important;
      border-color: #c8c8c8 !important;
    }
  }
}

//   table
.ant-table {
  border-radius: 0 !important;
  font-size: 16rem !important;
}
.ant-table-wrapper {
  .ant-table-thead > tr > th {
    text-align: center;
    background-color: #feece3;
    padding: 20rem 0;
    border-right: 1rem solid #fff;
    border-bottom: 1rem solid #fff;
  }

  .ant-table-tbody > tr > td,
  tfoot > tr > td {
    border-right: 1rem solid #fff;
    border-bottom: 1rem solid #fff;
    border-top: none;
    padding: 10rem !important;
    white-space: pre-line;
  }

  .ant-table-row:nth-child(2n) {
    background: #eee !important;
  }
}
.ant-empty {
  .ant-empty-image {
    font-size: 14rem !important;
  }
  .ant-empty-description {
    font-size: 14rem !important;
  }
}

.ant-table td {
  white-space: nowrap;
}

.operate-btn {
  display: inline-block;
  padding: 0 10rem;
  color: #ec7b2d;
}

.pager {
  padding: 20rem;
  box-sizing: border-box;
  text-align: right;
  font-size: 14rem !important;
  .ant-select-selection-search-input {
    height: 32rem !important;
  }
  .ant-select-selector {
    height: 32rem !important;
    line-height: 32rem !important;
    padding: 0 11rem !important;
    font-size: 14rem !important;
  }
  .ant-select-selection-item {
    height: 32rem !important;
    line-height: 32rem !important;
  }
  .ant-select .ant-select-arrow {
    font-size: 14rem !important;
  }
  .ant-select-dropdown .ant-select-item {
    min-height: 32rem !important;
    padding: 5rem 12rem !important;
    font-size: 14rem !important;
    border-radius: 4rem !important;
  }
  .ant-pagination-options-quick-jumper {
    height: 32rem !important;
    line-height: 32rem !important;

    input {
      width: 50rem !important;
      min-width: rem !important;
      padding: 4rem 11rem !important;
      font-size: 14rem !important;
      border-width: 1rem !important;
      border-radius: 6rem !important;
      height: 32rem !important;
      margin-inline-start: 8rem !important;
      margin-inline-end: 8rem !important;
    }
  }

  .ant-pagination-prev,
  .ant-pagination-prev .ant-pagination-item-link,
  .ant-pagination-next,
  .ant-pagination-next .ant-pagination-item-link {
    min-width: 32rem !important;
    height: 32rem !important;
    margin-inline-end: 8rem;
    line-height: 30rem !important;
    border-radius: 6rem !important;
    font-size: 12rem !important;
  }
  .ant-pagination-item {
    min-width: 32rem !important;
    height: 32rem !important;
    margin-inline-end: 8rem;
    line-height: 30rem !important;
    border-radius: 6rem !important;
  }
  .ant-pagination-item-active {
    border-color: #ed640f !important;

    a {
      color: #ed640f !important;
    }
  }
}
